<template>
  <view class="container">
    <view class="content-card">
      <!-- <view class="title">{{ $t('agreement.title') }}</view> -->
      <view class="content">
        <view class="section">
          <view class="section-title">一、服务条款的接受</view>
          <text>
            欢迎使用本应用。本协议是您与本应用之间关于您下载、安装、使用、登录本应用服务所订立的协议。
            在您开始使用本应用之前，请您务必认真阅读并充分理解本协议，特别是涉及免除或者限制责任的条款、权利许可和信息使用的条款、同意开通和使用特殊单项服务的条款、法律适用和争议解决条款等。
          </text>
        </view>

        <view class="section">
          <view class="section-title">二、用户行为规范</view>
          <text>
            您不得利用本服务制作、复制、发布、传播如下内容： 1. 反对宪法所确定的基本原则的； 2.
            危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的； 3. 损害国家荣誉和利益的...
          </text>
        </view>

        <view class="section">
          <view class="section-title">三、免责声明</view>
          <text>
            您理解并同意，在使用本服务的过程中，可能会遇到不可抗力等风险因素，使本服务发生中断。不可抗力是指不能预见、不能克服并不能避免且对一方或双方造成重大影响的客观事件...
          </text>
        </view>
        <!-- 您可以在此添加更多章节 -->
      </view>
    </view>
  </view>
</template>

<script setup>
  import { onReady } from '@dcloudio/uni-app'
  import { useI18n } from 'vue-i18n'

  const { t } = useI18n()

  onReady(() => {
    // 动态设置页面标题以支持国际化
    uni.setNavigationBarTitle({
      title: t('agreement.title')
    })
  })
</script>

<style lang="scss" scoped>
  .container {
    padding: 24rpx;
  }

  .content-card {
    background-color: white;
    border-radius: 16rpx;
    padding: 40rpx 30rpx;
  }

  .title {
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 40rpx;
  }

  .content .section {
    margin-bottom: 30rpx;
  }

  .content .section-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 16rpx;
  }

  .content text {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    display: block;
  }
</style>
